<template>
    <div class="login-vue" :style="bg">
        <div class="container">
            <p class="title">登录运营管理</p>
            <div class="input-c">
                <Input prefix="ios-contact" v-model="loginData.username" placeholder="用户名" clearable @on-blur="verifyUsername"/>
                <p class="error">{{usernameError}}</p>
            </div>
            <div class="input-c">
                <Input type="password" v-model="loginData.password" prefix="md-lock" placeholder="密码" clearable @on-blur="verifyPassword"/>
                <p class="error">{{passwordError}}</p>
            </div>
            <Button :loading="isShowLoading" class="submit" type="primary" @click="submit">登陆</Button>
            <!-- <p class="username"><span @click="register">注册账号</span> | <span @click="forgetPassword">忘记密码</span></p> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            loginData:{username:'',password:''},
            usernameError: '',
            passwordError: '',
            isShowLoading: false,
            bg: {}
        }
    },
    created() {
        this.bg.backgroundImage = 'url(/images/ht/bg0' + new Date().getDay() + '.jpg)'
    },
    watch: {
        $route: {
            handler: function(route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    methods: {
        verifyUsername() {
            if (!this.loginData.username) {
                this.usernameError = '请输入账号'
                return false
            }
            return true
        },
        verifyPassword() {
            if (!this.loginData.password) {
                this.passwordError = '请输入密码'
                return false
            }
            return true
        },
        register() {
            console.log('注册账号')
        },
        forgetPassword() {
            console.log('忘记密码')
        },
        submit() {
            if(this.verifyUsername() && this.verifyPassword()){
                this.$axios.post('/manager/manager/login',this.loginData).then(res => {
                    res = res.data
                    if(res.status){
                        localStorage.setItem('ManagerToken',res.data.ManagerToken)
                        localStorage.setItem('LoginManager',JSON.stringify(res.data.manager))
                        this.$router.push({path: this.redirect || '/'})
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.log(error)
                    this.$Message.error('网络错误!');
                })
            }
        }
    }
}
</script>

<style>
.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.login-vue .container {
    background: rgba(255, 255, 255, .5);
    width: 300px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
}
.login-vue .ivu-input {
    background-color: transparent;
    color: #fff;
    outline: #fff;
    border-color: #fff;
}
.login-vue ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, .8);
}
.login-vue ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, .8);
}
.login-vue .title {
    font-size: 16px;
    margin-bottom: 20px;
}
.login-vue .input-c {
    margin: auto;
    width: 200px;
}
.login-vue .error {
    color: red;
    text-align: left;
    margin: 5px auto;
    font-size: 12px;
    padding-left: 30px;
    height: 20px;
}
.login-vue .submit {
    width: 200px;
}
.login-vue .username {
    margin-top: 30px;
}
.login-vue .username span {
    cursor: pointer;
}
.login-vue .ivu-icon {
    color: #eee;
}
.login-vue .ivu-icon-ios-close-circle {
    color: #777;
}
</style>


